<template>
  <div class="search-container">
    <el-form ref="searchRef" :model="query" :inline="true">
      <el-form-item :label="item.label" :style="{'margin-left':item.marginLeft}" :prop="item.prop" v-for="item in options">
        <!-- 文本框、下拉框、日期框 -->
        <el-input v-if="item.type === 'input'" v-model="query[item.prop]" :disabled="item.disabled"
                  style="width: 150px"
                  :placeholder="item.placeholder" clearable></el-input>
        <el-select style="width: 150px;" v-else-if="item.type === 'select'" v-model="query[item.prop]"
                   :disabled="item.disabled"
                   :placeholder="item.placeholder" clearable>
          <el-option v-for="opt in item.opts" :key="opt.value" :label="opt.label" :value="opt.value"></el-option>
        </el-select>
        <!--          远程调用数据-->
        <el-select v-else-if="item.type === 'dynamic-select'" v-model="query[item.prop]" :disabled="item.disabled"
                   v-show="item.visible"
                   :style="{width: item.width}"
                   remote
                   remote-show-suffix
                   filterable
                   :remote-method="item.remoteMethod"
                   :loading="item.loading"
                   :placeholder="item.placeholder" clearable>
          <el-option v-for="opt in item.remoteOpts" :label="opt.label" :value="opt.value">
          </el-option>
        </el-select>
        <el-date-picker v-else-if="item.type === 'date'" type="date" v-model="query[item.prop]"
                        :value-format="item.format"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="search">搜索</el-button>
        <el-button :icon="Refresh" @click="resetForm(searchRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import {FormInstance} from 'element-plus';
import {Search, Refresh} from '@element-plus/icons-vue';
import {PropType, ref} from 'vue';
import {FormOptionList} from '@/types/form-option';

const props = defineProps({
  query: {
    type: Object,
    required: true
  },
  options: {
    type: Array as PropType<Array<FormOptionList>>,
    required: true
  },
  search: {
    type: Function,
    default: () => {
    }
  }
});

const searchRef = ref<FormInstance>();
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  props.search();
}
</script>

<style scoped>
.search-container {
  padding: 20px 30px 0;
  background-color: #fff;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 5px
}
</style>
